<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title>提交评论页面</title>
  <link rel="stylesheet" href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.min.css" />
  <link rel="stylesheet" href="https://ks3-cn-beijing.ksyun.com/vform3/render.style.css?t=20220129">
  <style type="text/css">
  </style>
</head>

<body>

  <div id="app">
    <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
    </v-form-render>
    <el-button type="primary" @click="submitForm">Submit</el-button>
  </div>

  <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.30/vue.global.min.js"></script>
  <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.full.min.js"></script>
  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js"></script>
  <script src="https://ks3-cn-beijing.ksyun.com/vform3/render.umd.js?t=20220129"></script>
  <script>
    const { createApp } = Vue;
    const app = createApp({
      data() {
        return {
          formJson: { "widgetList": [{ "key": 87833, "type": "rate", "icon": "rate-field", "formItemFlag": true, "options": { "name": "quality", "label": "商品质量", "labelAlign": "", "defaultValue": null, "columnWidth": "200px", "labelWidth": null, "labelHidden": false, "disabled": false, "hidden": false, "required": true, "requiredHint": "", "validation": "", "validationHint": "", "customClass": [], "labelIconClass": null, "labelIconPosition": "rear", "labelTooltip": null, "max": 5, "lowThreshold": 2, "highThreshold": 4, "allowHalf": false, "showText": false, "showScore": false, "onCreated": "", "onMounted": "", "onChange": "", "onValidate": "" }, "id": "rate109563" }, { "key": 87833, "type": "rate", "icon": "rate-field", "formItemFlag": true, "options": { "name": "attitude", "label": "客服态度", "labelAlign": "", "defaultValue": null, "columnWidth": "200px", "labelWidth": null, "labelHidden": false, "disabled": false, "hidden": false, "required": true, "requiredHint": "", "validation": "", "validationHint": "", "customClass": "", "labelIconClass": null, "labelIconPosition": "rear", "labelTooltip": null, "max": 5, "lowThreshold": 2, "highThreshold": 4, "allowHalf": false, "showText": false, "showScore": false, "onCreated": "", "onMounted": "", "onChange": "", "onValidate": "" }, "id": "rate76032" }, { "key": 87833, "type": "rate", "icon": "rate-field", "formItemFlag": true, "options": { "name": "speed", "label": "物流速度", "labelAlign": "", "defaultValue": null, "columnWidth": "200px", "labelWidth": null, "labelHidden": false, "disabled": false, "hidden": false, "required": true, "requiredHint": "", "validation": "", "validationHint": "", "customClass": "", "labelIconClass": null, "labelIconPosition": "rear", "labelTooltip": null, "max": 5, "lowThreshold": 2, "highThreshold": 4, "allowHalf": false, "showText": false, "showScore": false, "onCreated": "", "onMounted": "", "onChange": "", "onValidate": "" }, "id": "rate73300" }, { "key": 51204, "type": "textarea", "icon": "textarea-field", "formItemFlag": true, "options": { "name": "text", "label": "评论内容", "labelAlign": "", "rows": 3, "defaultValue": "", "placeholder": "请输入您的评论，谢谢！", "columnWidth": "200px", "size": "", "labelWidth": null, "labelHidden": false, "readonly": false, "disabled": false, "hidden": false, "required": false, "requiredHint": "", "validation": "", "validationHint": "", "customClass": "", "labelIconClass": null, "labelIconPosition": "rear", "labelTooltip": null, "minLength": null, "maxLength": null, "showWordLimit": false, "onCreated": "", "onMounted": "", "onInput": "", "onChange": "", "onFocus": "", "onBlur": "", "onValidate": "" }, "id": "textarea82837" }, { "key": 19394, "type": "switch", "icon": "switch-field", "formItemFlag": true, "options": { "name": "annoy", "label": "是否匿名", "labelAlign": "", "defaultValue": true, "columnWidth": "200px", "labelWidth": null, "labelHidden": false, "disabled": false, "hidden": false, "customClass": "", "labelIconClass": null, "labelIconPosition": "rear", "labelTooltip": null, "switchWidth": 40, "activeText": "", "inactiveText": "", "activeColor": null, "inactiveColor": null, "onCreated": "", "onMounted": "", "onChange": "", "onValidate": "" }, "id": "switch56151" }], "formConfig": { "modelName": "formData", "refName": "vForm", "rulesName": "rules", "labelWidth": 80, "labelPosition": "left", "size": "", "labelAlign": "label-left-align", "cssCode": "", "customClass": [], "functions": "", "layoutType": "PC", "jsonVersion": 3, "onFormCreated": "", "onFormMounted": "", "onFormDataChange": "" } },
          formData: {},
          optionData: {}
        }
      },
      methods: {
        submitForm() {
          this.$refs.vFormRef.getFormData().then((formData) => {
            // Form Validation OK
            // alert( JSON.stringify(formData) )
            // window.location.href= "http://127.0.0.1:8000/example/result" 重定向
            // FormSubmit('http://127.0.0.1:8000/example/submit',formData)  //表单参数
            // json参数: axios实现的
            axios({
              method: "post",
              url: "http://127.0.0.1:8000/submit",
              data: formData,
            }).then(function (response) { // 请求成功
              // alert("请求成功：" + response.data.msg);
              window.location.href="http://127.0.0.1:8000/result"
            }).catch(function (error) { // 请求失败
              alert("请求失败：" + error.response.data.msg);
            })
          }).catch(function (error) {
            // Form Validation Failed
            alert(error)
          })
        }
      }
    });
    app.use(ElementPlus)
    app.use(VFormRender)
    app.mount("#app");

    // 表单提交，可以在后端代码中的相应返回到指定的页面
    function FormSubmit(url, params, method = "post") {
      const form = document.createElement("form"); // 创建表单
      form.setAttribute("method", method);
      form.setAttribute("action", url);

      for (const p in params) {  // 填充数据
        if (params.hasOwnProperty(p)) {
          const input = document.createElement("input");
          input.setAttribute("type", "hidden");
          input.setAttribute("name", p);
          input.value = params[p];
          form.appendChild(input);
        }
      }

      document.querySelector("html").appendChild(form);
      form.submit(); // 提交表单
    }
  </script>
</body>

</html>